<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格断裂点</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
        }

        html,
        body,
        div {
            box-sizing: border-box;
        }

        body {
            background: #FFFFFF;
        }

        .jgdld-contanier {
            width: 780px;
            margin: 0 auto 24px;
            background: white;
            padding: 20px;
        }

        .jgdld-table {
            border-collapse: collapse;
            border: 1px solid #EDEDED;
            width: 100%;
            margin-top: 26px;
        }

        .jgdld-table thead {
            background: #F5F5F5;
        }

        .jgdld-table td,
        .jgdld-table th {
            border: 1px solid #EDEDED;
            height: 40px;
            line-height: 40px;
            padding: 0 12px;
            font-size: 14px;
        }

        .jgdld-table th {
            font-weight: normal;
            color: #8C8C8C;
        }

        .jgdld-table td {
            font-weight: normal;
            color: #262626;
        }

        .jgdld-table th:nth-child(1) {
            text-align: right;
            width: 33.33%;
        }

        .jgdld-table th:nth-child(2) {
            text-align: right;
            width: 33.33%;
        }

        .jgdld-table th:nth-child(3) {
            text-align: right;
            width: 33.33%;
        }

        .jgdld-table td:nth-child(1),
        .jgdld-table td:nth-child(3) {
            text-align: right;
        }

        .jgdld-table td:nth-child(2) {
            text-align: right;
        }

        .jgdld-tips {
            line-height: 20px;
            color: #8C8C8C;
            font-size: 14px;
            margin-top: 8px;
        }

        .jgdld-chart {
            height: 400px;
        }
    </style>
    <script src="https://cdn.highcharts.com.cn/10.2.1/highcharts.js"></script>
</head>

<body>
    <div class="jgdld-contanier">
        <div class="jgdld-chart" id="jgdld-chart">

        </div>
        <table class="jgdld-table">
            <thead>
                <tr>
                    <th>价格</th>
                    <th>肯定或可能购买比例</th>
                    <th>虚拟收益</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>¥ 5.00</td>
                    <td>10.00%</td>
                    <td>¥ 1000.01</td>
                </tr>
                <tr>
                    <td>¥ 10.00</td>
                    <td>20.00%</td>
                    <td>¥ 2000.66</td>
                </tr>
                <tr>
                    <td>¥ 5.00</td>
                    <td>8000</td>
                    <td>模拟数据就不会写的很长</td>
                </tr>
                <tr>
                    <td>¥ 15.00</td>
                    <td>30.00%</td>
                    <td>¥ 166.33</td>
                </tr>
            </tbody>
        </table>
        <div class="jgdld-tips">虛拟收益=价格水平x肯定或可能购买比例，虛拟收益越高说明该价位取得到收益越高。</div>
    </div>
</body>
<script>
    var chart = Highcharts.chart('jgdld-chart', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'PSM价格敏感度',
            layout: 'horizontal',
            align: 'left',
        },
        colors:['#0095FF','#F79000'],
        legend: {
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            symbolRadius: '0'
        },
        xAxis: [{
            // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            //     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}%',
                style: {
                    color: '#333333'
                }
            },
            title: {
                text: '肯定或可能购买比例 ',
                style: {
                    color: '#333333'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '虚拟收益（元）',
                style: {
                    color: '#333333',
                    // transform: 'rotateX(90deg)'
                }
            },
            labels: { 
                format: '{value}',
                style: {
                    color: '#333333'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        series: [{
            name: '肯定或可能购买比例 ',
            type: 'column',
            yAxis: 0,
            pointWidth: 48,
            data: [[60,30],[70,90],[80,55],[90,18],[100,64]],
            tooltip: {
                valueSuffix: ' %'
            }
        }, {
            name: '虚拟收益（元）',
            type: 'line',
            yAxis: 1,
            marker: {
                enabled: true,
				radius:2.5,
                lineWidth: 1
            },
            data: [[60,410],[70,275],[80,190],[90,80],[100,120]], 
            tooltip: {
                valueSuffix: ''
            }
        }]
    });
</script>

</html>